<template>
    <div>
        <div class='box' :class='cla'>HOMER</div>
        <router-link to="/list/123">list</router-link>
        <router-link :to="{name:'mylist',params:{qqq:666}}">list</router-link>
        
        
      <router-view></router-view>    
    </div>
</template>
<script>
// @ is an alias to /src
export default {
    name: 'home',
    data() {
        return {
          cla:''
        }
    },
    created() {
      console.log(this.$route)
    },
    beforeRouteLeave(to,from,next){
      this.cla = 'box2'
      setTimeout(() => {
         this.cla = ''
        next()
      }, 500);
    },
    components: {
        
    }
}
</script>
<style lang="less">
  .box{
    width: 300px;
    height: 100px;
    background: blue;
    animation: move 0.5s  ;
  }
  .box2{
    animation: leave 0.5s backwards;
  }
  @keyframes move {
    0%{
      opacity: 0;
      transform: translateX(-200px);
    }
    100%{
       opacity: 1;
      transform: translateX(0px);
    }
  }
  @keyframes leave {
    0%{
      opacity: 1;
      transform: translateX(0px);
      
    }
    100%{
       opacity: 0;
      transform: translateX(-200px);
    }
  }
</style>